import eventBus from '@/utils/eventBus'
import { anchorPointVisible, inAnchorPointActive } from '../utils/anchor-point'

eventBus.$on('add-edge-end', info => {
    inAnchorPointActive()
})

export default {
    getEvents () {
        return {
            'node:mouseenter': 'onMouseenter',
            'node:mouseleave': 'onMouseleave',

            'node:dragstart': 'onDragStart'
        }
    },

    onMouseenter (event) {
        const { graph } = this
        const { item } = event

        if (item.hasState('selected')) {
            return
        }

        // 显示 连接点
        anchorPointVisible(item, true)

        graph.setItemState(item, 'hover', true)
        graph.paint()
    },

    onMouseleave ({ item }) {
        const { graph } = this

        if (item.hasState('selected')) {
            return
        }

        // 隐藏连接点
        anchorPointVisible(item, false)

        graph.setItemState(item, 'hover', false)
        graph.paint()
    },

    onDragStart (event) {
        // 添加 边
        if (event.target.attrs.isOutAnchorPoint) {
            const { graph } = this

            graph.setMode('addEdge')

            inAnchorPointActive(graph)

            const { item } = event
            eventBus.$emit('add-edge', {
                source: item,
                sourceAnchor: item.getModel().isStart ? 0 : 1
            })
        }
    }
}
